<script setup>
import comps from "@/components/utils/component_selector.js"
import { computed, defineProps } from "vue";
const { meta, vm } = defineProps(["meta", "vm"]);


const tabItems = computed(() => {
  let childs = meta.controls || [];
  let filtered = childs.filter(x => vm.getState(x));
  return filtered;
});


function dispplayItems() {
  let childs = meta.controls;
  let filtered = childs.filter(x => vm.isComponentVisible(x));
  return filtered;
}


const activeTab = computed(() => {
  let visTabItems = tabItems.value;
  if (visTabItems && visTabItems.length > 0) {
    let name = visTabItems[0].name;
    return name;
  }
  return null;
});

function unWrap(proxy) {
  return proxy
}

</script>
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane v-for="(item, idx) in tabItems" :key="item.id" :label="item.title" :name="item.name">
      <component :is="comps(item)" :meta="item" :vm="vm" />
    </el-tab-pane>
  </el-tabs>
</template>